<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
  <div class="vr-manager" v-loading="loading">
    <div class="tools" v-if="!showForm">
      <el-button size="mini" @click="createHandle" type="primary" v-if="btns.create_post_servers">新建案场接待</el-button>
    </div>

    <div class="vr-listing" v-show="!showForm">
      <el-table :data="items">
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="电话号码" prop="mobile" ></el-table-column>
        <el-table-column label="是否启用" prop="enable">
          <template slot-scope="scope">
            <div v-if="scope.row.enable">已启用</div>
            <div v-if="!scope.row.enable">未启用</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="default" @click="editHandle(scope.row)" v-if="btns.update_post_servers">编辑</el-link>
            <el-link type="danger" @click="deleteHandle(scope.row)" v-if="btns.delete_post_servers">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <psform @cancle="() => showForm = false" @change="reloadHandle" v-show="showForm" :item="psItem"></psform>
  </div>
</template>

<style lang="scss" scoped>
.tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>

<script>
import { getPostServerList, deletePostServer } from "@/api/post-server"
import psform from './PostServerForm.vue'

export default {
  components: { psform },
  props: {
    postId: {
      type: Number,
      default: null,
    },

    btns: { type: Object, default: null },

  },

  data() {
    return {
      showForm: false,
      post: null,
      loading: false,
      psItem: {},
      items: [],
    };
  },

  watch: {
    postId: {
      immediate: true,
      handler(val, oval) {
        if (val) {
          this.loadItems();
        }
      },
    },
  },

  methods: {
    reloadHandle: function () {
      //   this.$message.success("已保存");
      this.showForm = false;
      this.loading = true;
      this.loadItems();
    },

    createHandle: function () {
      this.psItem = {
        post_id: this.postId,
        mobile: null,
        name: "",
        enable: true,
      };
      console.log("postservers item is", this.psItem);
      this.showForm = true;
    },

    editHandle: function (ps) {
      this.psItem = ps;
      this.showForm = true;
    },

    deleteHandle: function (ps) {
      this.$confirm("确定要删除这个案场接待吗？", "删除提示", {
        confirmButtonText: "删除",
        cancleButtonText: "不删除",
        type: "warning",
      }).then(() => {
        this.loading = true;
        deletePostServer(ps.id).then((resp1) => {
          this.loading = false;
          this.loadItems();
        });
      });
    },

    loadItems: function () {
      var _this = this;
      this.loading = true;
      var q = this.postId
      getPostServerList(q).then((resp) => {
        this.loading = false;
        if (resp.status != 0) {
          return;
        }
        _this.items = resp.data;
        _this.loading = false;
      });
    },

  }
}
</script>